<script setup lang="ts">
import { reactive,ref, watch } from 'vue'

const user = reactive({
    name: "张三",
    info: {
      gender: "男",
      age: 18,
    },
  });
  watch(user,()=>{
  console.log('user变化了')
})
// 侦听对象属性值 改写成箭头函数 返回属性值的写法
watch(()=>user.info.age,()=>{
  console.log('user.info.age变化了')
})
// 了解
watch(user.info,()=>{
  console.log('user.info 对象变化了')
})
// 推荐使用 通过参数3 ：开启深度侦听 {deep:true}
watch(()=>user.info,()=>{
  console.log('user.info 对象变化了,深度侦听')
},{
  // 深度侦听
  deep:true,
  //  一开始就默认执行一次
  immediate:true
})

</script>


<template>
  <p>{{ user }}</p>
  <button @click="user.name = '李四'">点击改名</button>
 <button @click="user.info.age++">点击年龄+1</button>
</template>

